<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>编辑职位</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	<style>
		.layui-transfer-header{
			background-color: #FBFBFB;
		}
		.layui-transfer-header span{
			color: black !important;
		}
	</style>
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
	<h1 style="margin-bottom: 20px;">职位管理</h1>
	<!-- 表单区+返回按钮 -->
	<div style="background-color: white;">
		<div class="layui-row">
			<!-- 返回按钮 -->
			<div class="layui-col-xs1" style="padding-left: 10px;padding-top: 10px;">
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-left"></i>返回</button>
			</div>
		</div>
		<!-- 蓝色分割线 -->
		<hr class="layui-bg-blue">
		<form class="layui-form layui-form-pane" action="" style="padding-left: 110px;">
			<!-- 第一排 -->
			<div class="layui-form-item">
				<div class="layui-inline" style="width: 45%">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-block">
						<input name="title" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline" style="width: 45%">
					<label class="layui-form-label">职位级别</label>
					<div class="layui-input-block">
						<select name="theme_skin" lay-verify="required">
							<option value="">请选择</option>
							<option value="1">1级（经理级）</option>
							<option value="2">2级（组长级）</option>
							<option value="3">3级（部员级）</option>
						</select>
					</div>
				</div>
			</div>
			<!-- 第二排 -->
			<div class="layui-form-item">
				<!--部门穿梭框-->
				<div id="transfer_dept" style="padding-left: 6px"></div>
			</div>
			<!-- 第三排 -->
			<div class="layui-form-item">
				<label class="layui-form-label">职位描述</label>
				<textarea name="desc" placeholder="请输入内容" class="layui-textarea" style="width: 92%"></textarea>
			</div>
			<!-- 功能按钮 -->
			<div class="layui-form-item" style="padding: 15px 0;">
				<div class="layui-inline">
					<button class="layui-btn" lay-submit lay-filter="submitBtn">保存</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</body>
<script>
	//form模块
	layui.use(['form','transfer'], function(){
	  var form = layui.form;
	  var transfer = layui.transfer;
	  
	  //监听提交
	  form.on('submit(submitBtn)', function(data){
	  	layer.msg(JSON.stringify(data.field));
	    return false;
	  });

	  //穿梭框渲染
	  transfer.render({
		  elem: '#transfer_dept',  //绑定元素
		  title:['部门','职位所属部门'],
		  id: 'demo1', //设定实例唯一索引，用于基础方法传参使用。
		  data: [],//数据源
		  value:[],//初始选中的数据（右侧列表）
		  showSearch:true,//是否开启搜索
		  width:400,
		  height:300,
		  onchange:function (data, index) {//左右数据穿梭时的回调
			  console.log(data); //得到当前被穿梭的数据
			  console.log(index); //如果数据来自左边，index 为 0，否则为 1
		  }
	  });
	});
</script>
</html>